<!--
 * @Description: 左侧点击菜单
 * @Author: 56208
 * @Date: 2025/4/18 18:45
 * @LastEditors: 56208
 * @LastEditTime: 2025/4/18 18:45
 * @FilePath: D:/vue3-electron-music/src/renderer/src/components/leftMenu\index.vue
 -->

<template>
  <div class="leftMenu-container">
    <div v-for="item in MENU_LIST" class="leftMenu-class" :key="item.menuTypeName">
      <el-text class="father-name">{{ item.menuTypeName }}</el-text>
      <div v-for="child in item.children" class="item" :key="child.path" @click="changeTab(child)" :class="activeIndex === child.path ? 'active' : ''">
        <el-image :src="child.icon" :alt="child.name" />
        <el-text class="name">{{ child.name }}</el-text>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { MENU_LIST } from '@renderer/components/leftMenu/menuList'
import { ref } from 'vue'
import { useRouter } from "vue-router";
const router = useRouter()

const activeIndex = ref('/recommend')
const changeTab = (child) => {
  activeIndex.value = child.path
  router.push(child.path)
}
</script>

<style scoped lang="less">
.leftMenu-container {
  display: flex;
  flex-direction: column;
  .title-font {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    color: #191F35;
    font-size: 24px;
  }
  .leftMenu-class {
    text-align: left;
    padding: 0 12px;
    margin-top: 30px;
    .father-name {
      padding-left: 30px;
      font-size: 18px;
      color: #191F35;
      font-weight: 600;
    }
    .item {
      margin-top: 10px;
      display: flex;
      align-items: center;
      height: 30px;
      padding: 12px 30px;
      border-radius: 4px;
      cursor: pointer;
      &:hover {
        background-color: #D9E1FF;
      }
      .name {
        color: #191F35;
        font-size: 14px;
        margin-left: 10px;
      }
    }
    .active {
      background-color: #D9E1FF;
    }
  }
}
</style>
